<template>
    <view class="result-page">
        <!-- 搜索框部分 -->
        <view class="search-header">
            <text class="back-btn" @click="goBack">返回</text>
            <view class="search-input-box">
                <input type="text" v-model="keyword" placeholder="搜索附近的商家、商品" @confirm="handleSearch"/>
            </view>
            <text class="search-btn" @click="handleSearch">搜索</text>
        </view>

        <!-- 结果统计 -->
        <view class="result-stats" v-if="shops.length > 0 || groupedProducts.length > 0">
            找到 {{shops.length}} 个相关商家，{{totalProducts}} 个相关商品
        </view>
        <view class="no-result" v-else>
            暂无相关结果
        </view>

        <!-- 搜索结果列表 -->
        <view class="result-list">
            <!-- 商家列表 -->
            <view v-if="shops.length > 0">
                <view class="section-title">相关商家</view>
                <view v-for="item in shops" :key="item._id" @click="goToShop(item._id)" class="shop-item">
                    <view class="shop-content">
                        <image class="shop-logo" :src="`/static/${item.imgUrl}`"></image>
                        <view class="shop-info">
                            <view class="shop-name">{{item.name}}</view>
                            <view class="shop-data">
                                月售: {{item.sales}} 起送: {{item.expressLimit}} 基础运费: {{item.expressPrice}}
                            </view>
                            <view class="shop-slogan" style="color: red;">{{item.slogan}}</view>
                        </view>
                    </view>
                    <view class="separator"></view>
                </view>
            </view>

            <!-- 商品列表 -->
            <view v-if="groupedProducts.length > 0">
                <view class="section-title">相关商品</view>
                <view v-for="group in groupedProducts" :key="group.shopId" class="product-group">
                    <view class="shop-header" @click="goToShop(group.shopId)">
                        <image class="shop-logo-small" :src="`/static/${group.shopImg}`"></image>
                        <text class="shop-name-small">{{group.shopName}}</text>
                    </view>
                    <view class="product-list">
                        <view v-for="item in group.products" :key="item._id" @click="goToShop(item.shopId)" class="product-item">
                            <view class="product-content">
                                <image class="product-image" :src="`/static/${item.imgUrl}`"></image>
                                <view class="product-info">
                                    <view class="product-name">{{item.name}}</view>
                                    <view class="product-data">
                                        月售: {{item.sales}} 件
                                    </view>
                                    <view class="product-price">
                                        <text class="current-price">¥{{item.price}}</text>
                                        <text class="original-price" v-if="item.oldPrice">¥{{item.oldPrice}}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="separator"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Config from '@/Config.js'

export default {
    data() {
        return {
            keyword: '',
            shops: [],
            products: [],
            shopMap: {}
        }
    },
    computed: {
        groupedProducts() {
            const groups = {};
            this.products.forEach(product => {
                if (!groups[product.shopId]) {
                    groups[product.shopId] = {
                        shopId: product.shopId,
                        shopName: this.shopMap[product.shopId]?.name || '未知商家',
                        shopImg: this.shopMap[product.shopId]?.imgUrl || '',
                        products: []
                    };
                }
                groups[product.shopId].products.push(product);
            });
            return Object.values(groups);
        },
        totalProducts() {
            return this.products.length;
        }
    },
    onLoad(options) {
        if (options.keyword) {
            this.keyword = options.keyword
            this.handleSearch()
        }
    },
    methods: {
        handleSearch() {
            if (!this.keyword.trim()) return
            
            // 搜索商家
            uni.request({
                url: Config.URL + "hotList",
                success: (res) => {
                    this.shops = res.data.filter(shop => 
                        shop.name.toLowerCase().includes(this.keyword.toLowerCase()) ||
                        shop.slogan.toLowerCase().includes(this.keyword.toLowerCase())
                    );
                    // 构建商家信息映射
                    this.shopMap = {};
                    res.data.forEach(shop => {
                        this.shopMap[shop._id] = shop;
                    });
                }
            })

            // 搜索商品
            uni.request({
                url: Config.URL + "products-all",
                success: (res) => {
                    this.products = res.data.filter(product => 
                        product.name.toLowerCase().includes(this.keyword.toLowerCase())
                    )
                }
            })
        },
        goToShop(id) {
            uni.navigateTo({
                url: `/pages/detail/detail?id=${id}`
            })
        },
        goBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style>
.result-page {
    background-color: #F8F8F8;
    min-height: 100vh;
}

.search-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #FFFFFF;
}

.back-btn {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
}

.search-input-box {
    flex: 1;
    background-color: #F5F5F5;
    border-radius: 32rpx;
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
}

.search-input-box input {
    height: 60rpx;
    font-size: 28rpx;
}

.search-btn {
    font-size: 28rpx;
    color: #333;
}

.result-stats {
    padding: 20rpx;
    font-size: 24rpx;
    color: #666;
}

.no-result {
    padding: 40rpx;
    text-align: center;
    color: #999;
    font-size: 28rpx;
}

.result-list {
    background-color: #FFFFFF;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 20rpx;
    color: #333;
}

.shop-item, .product-item {
    padding: 20rpx;
}

.shop-content, .product-content {
    display: flex;
    margin-bottom: 20rpx;
}

.shop-logo, .product-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
}

.shop-info, .product-info {
    flex: 1;
}

.shop-name, .product-name {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
}

.shop-data, .product-data {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.shop-slogan {
    font-size: 24rpx;
}

.product-price {
    display: flex;
    align-items: baseline;
}

.current-price {
    font-size: 32rpx;
    color: #e74c3c;
    font-weight: bold;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
    margin-left: 10rpx;
}

.separator {
    height: 1rpx;
    background-color: #EEEEEE;
    margin: 0 -20rpx;
}

.product-group {
    margin-bottom: 20rpx;
    background-color: #FFFFFF;
}

.shop-header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #F8F8F8;
}

.shop-logo-small {
    width: 60rpx;
    height: 60rpx;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.shop-name-small {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.product-list {
    padding: 0 20rpx;
}
</style> 